<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-aside width="200px">
                    <el-menu active-text-color="green" background-color="#545c64" text-color="#fff"
                        class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="select">
                        <template v-if="roleKey === 'MANAGER'">
                            <el-menu-item index="2">
                                <el-icon>
                                    <Soccer />
                                </el-icon>
                                <span slot="title">奖学金管理</span>
                            </el-menu-item>
                            <el-menu-item index="1">
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                                <span slot="title">学生管理</span>
                            </el-menu-item>
                        </template>
                        <tempalte v-else>
                            <el-menu-item index="3">
                                <el-icon>
                                    <Soccer />
                                </el-icon>
                                <span slot="title">奖学金管理</span>
                            </el-menu-item>
                        </tempalte>
                    </el-menu>

                    <el-dropdown trigger="click" class="user-operate" @command="handleCommand"
                        style="background: #545c64;width: 100%;color:#fff;text-align: center;">
                        <span class="el-dropdown-link">
                            当前登录人， {{ loginUser.nickName }}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-if="roleKey === 'STUDENT'" command="owner">个人信息</el-dropdown-item>
                                <el-dropdown-item command="exit">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
let router
import request from '@/utils/http';
import { useRouter } from "vue-router";
export default {
    name: "Index",
    data() {
        return {
            roleKey: null,
            loginUser: {
                nickName: ''
            }
        }
    },
    setup() {
        router = useRouter()
    },
    methods: {
        handleCommand(c) {
            debugger
            if (c === 'exit') {
                if (this.roleKey === 'MANAGER') {
                    request.post('/manager/exit')
                } else {
                    request.post('/student/exit')
                }
                router.push("/")
                sessionStorage.removeItem('login')
            } else if (c === 'owner') {
                router.push("/owner")
            }
        },
        select(index) {
            if (index == 1) {
                router.push("/student")
            } else if (index == 2) {
                router.push("/mscholarship")
            } else {
                router.push("/sscholarship")
            }
        },
    },
    created() {

        let data = sessionStorage.getItem("login")
        if (!data) {
            router.push("/")
        }
        let user = JSON.parse(data)
        this.loginUser = user
        this.roleKey = user.roleKey
    }
}
</script>

<style scoped>
.common-layout,
.el-container {
    height: 100%;
}

.el-menu-vertical-demo {
    height: calc(100% - 60px);
}

.logo {
    text-align: left;
    padding: 10px;
    height: 50px;
}

.user-operate {
    cursor: pointer;
    line-height: 60px;

}

.el-header {
    border-bottom: 1px solid var(--el-menu-border-color);
    box-shadow: var(--el-box-shadow-light);
    text-align: right;
    padding-right: 30px;
}
</style>